<script lang="ts">
  import { actixGraphqlEndpoint } from "$lib/js/stores";

  import { tooltip } from "$lib/js/tooltip";
  import type { QuizItem, KV, Quiz } from "$lib/ebm";
  import {
    Query,
    useQuery,
    useMutation,
    useQueryClient,
  } from "@sveltestack/svelte-query";
  import { request, gql } from "graphql-request";
  export let attributes: KV[] = [
    {
      k: "subject",
      v: "en",
    },
  ];

  let quizitemid = attributes.find((x) => x.k == "quiz_item_id");
  let classPointerEventsNone;
  const onMouseDown = () => {
    classPointerEventsNone = "pointer-events-none";
  };
  const onMouseUp = () => {
    classPointerEventsNone = "";
  };

  let endpoint = $actixGraphqlEndpoint;
  const FIND_QUIZITEM_QUERY = gql`
    query ($id: ID!) {
      quizitem: node(id: $id) {
        id
        createdAt
        updatedAt
        ... on QuizItem {
          title
          description
          descriptionMarkdown
          m3U8
          isMaster
          masterId
          options {
            k
            v
          }
          master {
            id
            title
            description
          }
        }
      }
    }
  `;

  const findQuizItemResult = useQuery<QuizItem, { message: string }>(
    ["quizitem", quizitemid.v],
    async () => {
      const { quizitem } = await request(endpoint, FIND_QUIZITEM_QUERY, {
        id: quizitemid.v,
      });
      return quizitem;
    }
  );

  let activePropertyId = "";
  const handlePropertyClick = (id) => () => (activePropertyId = id);
</script>

{#if $findQuizItemResult.isLoading}
  Loading...
{:else if $findQuizItemResult.isError}
  Error {$findQuizItemResult.error.message}
{:else if $findQuizItemResult.data}
  <div class="w-full grid grid-cols-3">
    <table class="bg-white text-gray-900 table-fixed col-span-2">
      <thead>
        <tr>
          <th
            colspan="4"
            class="text-left text-lg bg-blue-700 border-b-2 text-white"
          >
            Properties Of This QuizItem({$findQuizItemResult.data.title})
          </th>
          <th class="text-center text-lg bg-blue-700 border-b-2 text-white">
            <button
              class="m-2 px-2 bg-blue-500 hover:bg-rose-700 text-white font-semibold rounded-full"
              use:tooltip={{ theme: "light" }}
              title="Apply to the clones"
            >
              Apply
            </button>
          </th>
        </tr>
        <tr>
          <th class="bg-blue-700 text-white p-2 w-12">Property</th>
          <th colspan="2" class="bg-blue-700 text-white p-2">Value</th>
          <th class="bg-blue-700 text-white p-2 w-12" />
          <td
            class="bg-blue-700 text-white p-2 w-12 text-center"
            use:tooltip={{ theme: "light" }}
            title="Check all properties to apply to the clones"
          >
            <input type="checkbox" />
          </td>
        </tr>
      </thead>
      <tbody>
        <tr
          class="{activePropertyId === 'title'
            ? 'bg-rose-400'
            : 'bg-blue-100'} text-blue-900 hover:bg-rose-200 border-b border-teal-500 "
          on:click={handlePropertyClick("title")}
        >
          <td class="p-2">Title</td>
          <td colspan="3" class="p-2">
            <textarea
              type="text"
              class="resize-y rounded-md w-full h-12"
              value={$findQuizItemResult.data.title}
            />
          </td>
          <td class="p-2 text-center"><input type="checkbox" checked /></td>
        </tr>

        <tr
          class="{activePropertyId === 'm3u8'
            ? 'bg-rose-400'
            : 'bg-blue-100'} text-blue-900 hover:bg-rose-200 border-b border-teal-500 "
          on:click={handlePropertyClick("m3u8")}
        >
          <td class="p-2">HLS m3u8</td>
          <td colspan="3" class="p-2">
            <div class=" flex flex-row space-x-4">
              <input
                class="rounded-md w-2/3 h-12"
                type="text"
                placeholder="HLS m3u8 file path"
                value={$findQuizItemResult.data.m3U8}
                use:tooltip={{ theme: "light" }}
                title="HLS m3u8 file path"
              />
              <input
                class="rounded-md w-1/3 h-12"
                type="number"
                placeholder="Start Position"
                use:tooltip={{ theme: "light" }}
                title="Start Position"
              />
            </div>
          </td>
          <td class="p-2 text-center"><input type="checkbox" checked /></td>
        </tr>

        <tr
          class="{activePropertyId === 'description'
            ? 'bg-rose-400'
            : 'bg-blue-100'} text-blue-900 hover:bg-rose-200  border-b border-teal-500 "
          on:click={handlePropertyClick("description")}
        >
          <td class="p-2">Description</td>
          <td colspan="3" class="p-2 w-32">
            <textarea
              type="text"
              class="resize-y rounded-md w-full h-20"
              value={$findQuizItemResult.data.description}
            />
          </td>
          <td class="p-2 text-center"><input type="checkbox" checked /></td>
        </tr>

        <tr
          class="{activePropertyId === 'isMaster'
            ? 'bg-rose-400'
            : 'bg-blue-100'} text-blue-900 hover:bg-rose-200  border-b border-teal-500 "
          on:click={handlePropertyClick("isMaster")}
        >
          <td class="p-2">Type</td>
          <td colspan="3" class="p-2">
            <div class="flex flex-row space-x-4">
              <div
                use:tooltip={{ theme: "light" }}
                title="Choice选择题，系统可以自动判断答案"
              >
                <input type="radio" value="choice" class="pl-4" /> CHOICE
              </div>

              <div
                use:tooltip={{ theme: "light" }}
                title="Cloze填空题，系统可以自动判断答案"
              >
                <input type="radio" value="cloze" /> CLOZE
              </div>

              <div
                use:tooltip={{ theme: "light" }}
                title="FREE主观题，系统不能自动判断答案"
              >
                <input type="radio" value="free" class="pl-4" /> FREE
              </div>
            </div>
          </td>
          <td class="p-2 text-center"><input type="checkbox" checked /></td>
        </tr>

        <tr
          class="{activePropertyId === 'stdAnswer'
            ? 'bg-rose-400'
            : 'bg-blue-100'} text-blue-900 hover:bg-rose-200  border-b border-teal-500 "
          on:click={handlePropertyClick("stdAnswer")}
        >
          <td class="p-2 bg-gray-300" colspan="1"> Sub Title </td>
          <td colspan="3" class="p-2 bg-gray-300">
            <textarea
              type="text"
              class="resize-y rounded-md w-full h-12"
              value={$findQuizItemResult.data.description}
            />
          </td>
          <td class="p-2 bg-gray-300 text-center">
            <input type="checkbox" />
          </td>
        </tr>

        <tr
          class="{activePropertyId === 'stdAnswer'
            ? 'bg-rose-400'
            : 'bg-blue-100'} text-blue-900 hover:bg-rose-200  border-b border-teal-500 "
          on:click={handlePropertyClick("stdAnswer")}
        >
          <td class="p-2 bg-gray-300" colspan="1"> Choices </td>
          <td class="p-2 bg-gray-300" colspan="2"> Title </td>
          <td
            class="p-2 bg-gray-300 text-center"
            colspan="1"
            use:tooltip={{ theme: "light" }}
            title="Is this option a stardard answer ?"
          >
            Ans
          </td>

          <td class="p-2 bg-gray-300 text-center">
            <input type="checkbox" />
          </td>
        </tr>

        <tr
          class="{activePropertyId === 'optionA'
            ? 'bg-rose-400'
            : 'bg-gray-300'} text-blue-900 hover:bg-rose-200  border-b border-teal-500 "
          on:click={handlePropertyClick("optionA")}
        >
          <td class="p-2 " colspan="1">
            <input
              type="text"
              class="rounded-md w-12 h-12 bg-gray-200"
              disabled
              value="A"
            />
          </td>
          <td class="p-2 " colspan="2">
            <textarea
              type="text"
              class="resize-y rounded-md w-full h-12"
              value="optinua answer asdlk"
            />
          </td>
          <td
            class="p-2 text-center"
            use:tooltip={{ theme: "light" }}
            title="Add this option to stardard answer"
          >
            <input type="checkbox" />
          </td>
          <td class="p-2 text-center">
            <input type="checkbox" />
          </td>
        </tr>

        <tr
          class="{activePropertyId === 'optionB'
            ? 'bg-rose-400'
            : 'bg-gray-300'} text-blue-900 hover:bg-rose-200  border-b border-teal-500 "
          on:click={handlePropertyClick("optionB")}
        >
          <td class="p-2 " colspan="1">
            <input
              type="text"
              class="rounded-md w-12 h-12 bg-gray-200"
              disabled
              value="B"
            />
          </td>
          <td class="p-2 " colspan="2">
            <textarea
              type="text"
              class="resize-y rounded-md w-full h-12"
              value="optinua answer asdabs"
            />
          </td>
          <td
            class="p-2 text-center"
            use:tooltip={{ theme: "light" }}
            title="Add this option to stardard answer"
          >
            <input type="checkbox" />
          </td>
          <td class="p-2 text-center">
            <input type="checkbox" />
          </td>
        </tr>

        <tr
          class="{activePropertyId === 'optionC'
            ? 'bg-rose-400'
            : 'bg-gray-300'} text-blue-900 hover:bg-rose-200  border-b border-teal-500 "
          on:click={handlePropertyClick("optionC")}
        >
          <td class="p-2 " colspan="1">
            <input type="text" class="rounded-md w-12 h-12" value="C" />
          </td>
          <td class="p-2 " colspan="2">
            <textarea
              type="text"
              class="resize-y rounded-md w-full h-12"
              placeholder="Input Title To Create New QuizItem"
              value=""
            />
          </td>
          <td colspan="2" class="p-2 text-center">
            <button
              class="m-2 px-4 bg-blue-500 hover:bg-rose-700 text-white font-semibold rounded-full"
              use:tooltip={{ theme: "light" }}
              title="Add Option"
            >
              Add Option
            </button>
          </td>
        </tr>

        <tr
          class="{activePropertyId === 'stdAnswer'
            ? 'bg-rose-400'
            : 'bg-blue-100'} text-blue-900 hover:bg-rose-200  border-b border-teal-500 "
          on:click={handlePropertyClick("stdAnswer")}
        >
          <td class="p-2">Standard Answer </td>
          <td colspan="3" class="p-2">
            <textarea
              type="text"
              class="resize-y rounded-md w-full h-12"
              value={$findQuizItemResult.data.stdAnswer}
            />
          </td>
          <td class="p-2 text-center"><input type="checkbox" /></td>
        </tr>
      </tbody>
    </table>
    <div class="ml-2 bg-gray-100 flex flex-col">
      <div class=" text-lg text-left w-full bg-green-300">
        Property Description Preview
      </div>
      <div class="bg-gray-200">
        {@html $findQuizItemResult.data.descriptionMarkdown}
      </div>
    </div>
  </div>
{:else}
  No Property for quizitemid.k={quizitemid.v}?
{/if}
